/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="comp-content">
    <Title title="补偿方式(户)"></Title>
    <div class="main">
      <v-chart auto-resize :options="options" theme="macarons" ref="chart"/>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
import ECharts from "vue-echarts";
import config from "../../utils/config.js";

const getChartOptions = data => {
  if (!data) return {};
  let total = 0;
  for (let i in data) {
    total += data[i];
  }
  let chartOptions = {
    grid: {
      top: "6%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}户 ({d}%)"
    },
    legend: {
      //图例组件
      orient: "vertical", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      left: "55%",
      top: "middle",
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      icon: "circle",
      data: ["货币", "多产权人", "平台选购", "产权调换", "多证合一"],
      textStyle: {
        //图例文字的样式
        color: "#fff", //文字颜色
        fontSize: window.chartFontSize * 0.8 //文字大小
      },
      formatter: function(name) {
        let present;
        switch (name) {
          case "货币":
            present = ((data.huobi / total) * 100).toFixed(2) + "%";
            return name + "  " + data.huobi + "  " + present;
            break;
          case "产权调换":
            present = ((data.chanquan / total) * 100).toFixed(2) + "%";
            return name + "  " + data.chanquan + "  " + present;
            break;
          case "平台选购":
            present = ((data.pingtai / total) * 100).toFixed(2) + "%";
            return name + "  " + data.pingtai + "  " + present;
            break;
          case "多证合一":
            present = ((data.especial / total) * 100).toFixed(2) + "%";
            return name + "  " + data.especial + "  " + present;
            break;
          case "多产权人":
            present = ((data.multi / total) * 100).toFixed(2) + "%";
            return name + "  " + data.multi + "  " + present;
            break;
          default:
            break;
        }
      }
    },
    series: [
      {
        name: "补偿方式",
        type: "pie",
        center: ["30%", "50%"],
        radius: "90%", //半径
        label: {
          show: false
        },
        hoverAnimation: false,
        data: [
          { name: "货币", value: data.huobi },
          { name: "产权调换", value: data.chanquan },
          { name: "平台选购", value: data.pingtai },
          { name: "多证合一", value: data.especial },
          { name: "多产权人", value: data.multi }
        ]
      }
    ]
  };
  return chartOptions;
};

export default {
  props: {
    compenstation: Object
  },
  data() {
    return {
      options: getChartOptions(this.compenstation)
    };
  },
  watch: {
    compenstation: function(data) {
      this.options = getChartOptions(data);
    }
  },
  components: {
    Title,
    "v-chart": ECharts
  },
  mounted() {
    const self = this;
    // let chartOption = ;
    // this.options = chartOption;
    // let chartObj = self.$refs.chart;
    // self.currentIndex = -1;

    // setInterval(function() {
    //   var dataLen = 5;
    //   // 取消之前高亮的图形
    //   chartObj.dispatchAction({
    //     type: "downplay",
    //     seriesIndex: 0,
    //     dataIndex: self.currentIndex
    //   });
    //   self.currentIndex = (self.currentIndex + 1) % dataLen;
    //   // 高亮当前图形
    //   chartObj.dispatchAction({
    //     type: "highlight",
    //     seriesIndex: 0,
    //     dataIndex: self.currentIndex
    //   });
    //   // 显示 tooltip
    //   chartObj.dispatchAction({
    //     type: "showTip",
    //     seriesIndex: 0,
    //     dataIndex: self.currentIndex
    //   });
    // }, config.animateInterval || 1000);
  }
};
</script>

<style lang='less' scoped>
.comp-content {
  width: 100%;
  height: 100%;
  position: relative;
  // overflow: hidden;
  .main {
    width: 100%;
    height: 80%;
    position: relative;
  }
}
</style>
